프로젝트 개요#

이번 프로젝트는 물류 서비스 회사인 '아임유어박스'의 웹사이트를 개발하는 외주 작업이었습니다. 기존 사이트의 여러 문제점을 개선하고 현대적인 기술 스택으로 재구축하는 것이 주요 목표였습니다.

기술 스택 선택과 구현 과정에서의 도전#

1. PayloadCMS 도입과 설정#

헤드리스 CMS 선택의 이유와 도전#

웹사이트를 개발하면서 가장 큰 결정 중 하나는 헤드리스 CMS 선택이었습니다. 클라이언트가 뉴스, 공지사항, 채용정보 등의 콘텐츠를 직접 관리할 수 있어야 했기 때문입니다.

Typescripttypescript
Copy

PayloadCMS를 처음 도입할 때는 문서가 제한적이었고, 특히 복잡한 요구사항을 구현하는 과정에서 많은 시행착오가 있었습니다. 예를 들어, 컬렉션 간의 관계 설정이나 커스텀 필드 타입 구현에서 TypeScript 오류가 자주 발생했습니다.

특히 어려웠던 점은:

• 데이터 모델링과 스키마 설계
• 관리자 패널 커스터마이징
• 프론트엔드와 백엔드 통합

하지만 이런 초기 어려움을 극복한 후에는 PayloadCMS의 강력한 기능과 유연성이 개발 속도를 크게 향상시켰습니다.

React TSXtsx
Copy

이 기능을 구현하기 위해 다음과 같은 도전 과제가 있었습니다:

1. PayloadCMS Admin 컴포넌트 확장: PayloadCMS의 관리자 UI에 커스텀 버튼을 추가하는 방법이 직관적이지 않았습니다. 결국 소스 코드를 분석하고 커뮤니티 포럼에서 해결책을 찾았습니다.

2. 대용량 데이터 처리: 문의 데이터가 많아질 경우를 대비하여 페이지네이션 기반으로 데이터를 가져오고 스트리밍 방식으로 처리하는 로직을 구현해야 했습니다.

3. 문자 인코딩 문제: 한글이 포함된 CSV 파일이 Excel에서 정상적으로 열리도록 하는 인코딩 처리가 필요했습니다.

이런 어려움을 해결한 후에는 클라이언트가 쉽게 데이터를 관리하고 분석할 수 있게 되었습니다. 이 과정에서 PayloadCMS의 내부 구조를 더 깊이 이해하게 되었고, 이는 추후 다른 커스텀 기능 개발에도 큰 도움이 되었습니다.

<!-- 이미지 3: 커스텀 CSV Export 버튼이 있는 문의 내역 관리 화면 - 실제 문의 데이터 목록과 상단에 구현한 내보내기 버튼이 보이도록 캡처 -->

3. 이메일 시스템 구현#

Typescripttypescript
Copy

주요 도전 과제:

1. 이메일 템플릿 관리: React Email을 사용하여 컴포넌트 기반의 이메일 템플릿을 구현했지만, 다양한 이메일 클라이언트에서 일관되게 표시되도록 하는 것이 어려웠습니다.

2. SMTP 오류 처리: 프로덕션 환경에서 간헐적으로 SMTP 연결 문제가 발생했습니다. 이를 해결하기 위해 타임아웃 처리와 재시도 로직을 구현했습니다.

3. 개발-프로덕션 환경 차이: 개발 중에는 실제 이메일을 보내지 않고 로컬에서 테스트할 수 있는 방법이 필요했습니다. 이를 위해 환경에 따른 조건부 로직을 구현했습니다.

이러한 도전을 해결하면서 견고한 이메일 시스템을 구축할 수 있었고, 클라이언트의 비즈니스 프로세스 개선에 크게 기여했습니다.

4. Supabase를 활용한 미디어 관리#

PayloadCMS의 미디어 관리 시스템을 Supabase Storage와 통합하는 과정도 복잡했습니다.

Typescripttypescript
Copy

미디어 관리 시스템 구현에서 다음과 같은 도전 과제가 있었습니다:

1. Supabase Storage 정책 설정: Supabase Storage에 적절한 접근 정책을 설정하여 이미지 업로드와 접근 권한을 관리해야 했습니다. 처음에는 정책 설정에 대한 이해 부족으로 업로드가 실패하는 문제가 있었습니다.

2. 이미지 최적화: 웹사이트 성능을 위해 업로드된 이미지를 자동으로 최적화하는 시스템을 구현했습니다. Sharp 라이브러리를 통합하여 다양한 크기의 이미지 버전을 생성했습니다.

3. 로컬-프로덕션 환경 차이: 개발 환경과 프로덕션 환경에서 Supabase 설정을 일관되게 유지하는 것이 중요했습니다. 환경 변수 관리와 개발용 Supabase 프로젝트를 따로 설정하여 이를 해결했습니다.

이런 노력 덕분에 웹사이트의 이미지와 미디어 파일이 효율적으로 관리되고, 페이지 로딩 속도도 최적화할 수 있었습니다.

웹사이트 디자인과 구현#

웹사이트는 현대적이고 사용자 친화적인 디자인으로 구현되었습니다:

1. 반응형 네비게이션: 모바일과 데스크톱 모두에서 최적화된 네비게이션 바
2. 패럴랙스 스크롤 효과: 메인 페이지의 시각적 효과를 위한 패럴랙스 스크롤 구현
3. 견적 계산기: 사용자가 쉽게 서비스 견적을 계산할 수 있는 단계별 폼
4. 서비스 소개 페이지: 아이콘과 설명을 통해 서비스를 명확하게 소개

각 페이지별로 사용자 경험을 최우선으로 고려하여 디자인과 기능을 구현했습니다:

1. 메인 페이지: 패럴랙스 스크롤 효과와 애니메이션을 통한 시각적 매력 향상

   

   패러랠 이펙트

2. 견적 페이지: 단계별 폼을 통한 사용자 친화적인 견적 계산 시스템

   • 기본 정보

     

     price-calculator-step1.png
   • 상품 정보

     

     price-calculator-stop2
   • 견적 결과

     

     price-calculator-step3.png
3. 서비스 소개 페이지: 명확한 아이콘과 설명을 통한 서비스 이해도 향상

   

   service-icons-grid.png
4. 회사 소개 페이지: 타임라인 형식의 회사 연혁과 핵심 가치 전달

   

   company-timeline
5. 채용 정보 페이지: 회사 문화와 채용 프로세스, 현재 채용 중인 포지션 표시

   

   imyourweb-employment

이런 디자인 요소들은 Framer Motion과 TailwindCSS를 활용하여 구현되었으며, 사용자 경험을 최우선으로 고려했습니다.

• 데스크톱

  

  desktop-design
• 모바일

  

  mobild-design
• 모바일 메뉴

  

  mobile-menu-expanded.png

학습 및 성과#

이 프로젝트를 통해 풀스택 개발자로서 많은 성장을 경험했습니다:

1. 헤드리스 CMS 전문성: PayloadCMS의 복잡한 설정과 커스터마이징에 대한 깊은 이해
2. 서버리스 아키텍처: Next.js와 API 라우트를 활용한 서버리스 아키텍처 구현
3. 클라우드 서비스 통합: Supabase DB와 Storage 같은 클라우드 서비스와의 효율적인 통합
4. 성능 최적화: 이미지 최적화, 코드 스플리팅, 레이지 로딩 등을 통한 웹사이트 성능 향상

특히, PayloadCMS와 같은 상대적으로 덜 알려진 기술을 도입하면서 문서가 부족한 상황에서도 문제를 해결하는 능력이 크게 향상되었습니다. 소스 코드 분석, 커뮤니티 포럼 활용, 그리고 실험적 접근을 통해 다양한 기술적 도전을 극복했습니다.

개선 가능한 부분#

프로젝트를 성공적으로 완료했지만, 추후 개선할 수 있는 부분도 있습니다:

1. 테스트 자동화: 단위 테스트와 E2E 테스트를 추가하여 코드 품질 보장
2. 접근성 개선: 웹 접근성 지침에 따른 더 포괄적인 사용자 경험 제공
3. 성능 모니터링: 실시간 성능 모니터링 도구 통합으로 지속적인 최적화
4. 국제화 지원: 다국어 지원을 위한 i18n 통합

결론#

아임유어박스 웹사이트 개발은 새로운 기술 스택과 복잡한 요구사항을 다루는 도전적인 프로젝트였습니다. PayloadCMS, Next.js, Supabase 등 여러 기술을 통합하면서 많은 기술적 문제를 해결했고, 이 과정에서 풀스택 개발자로서 크게 성장할 수 있었습니다.

특히 PayloadCMS의 커스터마이징, 견적 계산 시스템 구현, 이메일 통합, 그리고 Supabase 기반 미디어 관리 시스템 등을 성공적으로 구현하여 클라이언트의 비즈니스 요구사항을 충족시켰습니다. 이 프로젝트는 기술적 도전을 넘어 실제 비즈니스 가치를 창출하는 웹 애플리케이션을 구축하는 소중한 경험이었습니다.